<template>
    <div class="model">
        <div class="zhezhao">
            <div class="bg">
                <div class="close">

                </div>

                <div class="centen">
                    <a href="javascript:;" @click="isPhoneLogin=true">手机号码登录</a> | <a href="javascript:;" @click="showQrCode">微信扫码登录</a>
                    <div class="lg">
                        <div class="phone" v-show="isPhoneLogin">
                            <input type="text" class="row"  v-model="phoneNumber"  placeholder="请输入手机号码" />
                            <div>
                                <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail"
                                    @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"
                                    :slider-text="msg"></slide-verify>
                            </div>
                            <div class="row mid">
                                <input type="text"   v-model="verifyCode" placeholder="请输入验证码"> <button @click="ruleFn">获取验证码</button>
                            </div>
                            <div><button  @click="loginFn" class="row">
                                    登录
                                </button></div>
                        </div>
                        <div class="weixin"  id="weixin" v-show="!isPhoneLogin"   >
                            微信登录
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

<script >
import { mapMutations } from "vuex";
import {SendSMSAPI} from "../api/api"
import {phoneReginAPI} from "../api/api"
export default {
    data() {
        return {
            msg: "向右滑动",
            phoneNumber:"",
            verifyCode:"",
            isPhoneLogin:true

        };
    },
    methods: {
        ...mapMutations({
        changeIsShowLoginModel:"isShowModel/changeIsShowLoginModel",
        changeIsLoginStatus:"loginStatus/changeisLoginStatus"
       }),
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
     //校验 
     async  ruleFn(){
        // 手机号
        let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

        if(!reg.test(this.phoneNumber)){
         alert("手机号不符合规则");
         return;
        }
        if(this.msg=="向右滑动" ||this.msg=="再试一次"){
           return;
        }
        // 全部通过发送请求
       let res1 =await  SendSMSAPI({phone:this.phoneNumber})

        console.log("res1",res1);
       
        
     },
     async loginFn(){
        let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

        if(!reg.test(this.phoneNumber)){
         alert("手机号不符合规则");
         return;
        }
        if(this.msg=="向右滑动" ||this.msg=="再试一次"){
           return;
        }
    //   1.点击登录 发送请求 
        let res = await phoneReginAPI({
            verifyCode:this.verifyCode,
            phone:this.phoneNumber

        })
        console.log(res);
        // 2.隐藏登录框
        this.changeIsShowLoginModel(false)
        // 3.存token
        localStorage.setItem("x-auth-token",res.data["x-auth-token"])
        // 4.购物车切换
        this.changeIsLoginStatus(false)  
     },
     showQrCode() {
        this.isPhoneLogin = false;
          //获取二维码 并展示
          // 申请微信登录二维码
          let _this = this;
          new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href:"data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLC5pbXBvd2VyQm94IC5pbmZvew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9ICAgIA0KLmltcG93ZXJCb3ggcXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
          });
        },

    },
 
};

</script>

<style lang="less" scoped>
#weixin{
    /* background-color: #fcf; */
    display: flex;
    justify-content: center;
    margin-top: -20px;
}
.model {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;

    .zhezhao {

        background-color: rgba(0, 0, 0, .5);
        width: 100%;
        height: 100%;

        .bg {
            background: url("../assets/img/login-box-bg.png") no-repeat center;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            width: 555px;
            height: 423px;

            .close {
                background: url("../assets/img/close.png");
                width: 22px;
                height: 22px;
                position: absolute;
                right: 60px;
                top: 15px
            }

            .lg {
                width: 355px;
                margin: 10px auto 0;

                .phone {
                    margin-top: 40px;

                    input {
                        outline: none
                    }

                    .row {
                        display: flex;
                        height: 40px;
                        width: 100%;
                        margin-bottom: 20px;

                        input {
                            width: 100%;

                        }

                    }

                    .mid {
                        margin-top: 20px;

                        button {
                            width: 100px;
                        }

                        input {
                            margin-right: 10px;
                        }
                    }

                    button {
                        display: flex;
                        background-color: #0a328e;
                        color: white;
                        border: 0px;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            .centen {
                margin-top: 30px;
                text-align: center;
                font-size: 18px;


                a {
                    text-decoration: none;
                    color: #000;


                }


            }

        }

    }
}

/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;

    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }

    .slide-verify-block {
        width: 85px;
        height: 136px;
    }

    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }

    &:hover {
        canvas {
            display: block;
        }

        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>